<template>
  <div class="coupon" style="position: relative;">
    <div class="spinner" v-if="loadingFlag">
      <div class="spinner-container container1">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
      <div class="spinner-container container2">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
      <div class="spinner-container container3">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
    </div>
    <div style="height: 100%;">
      <el-row class="a_top"
              style="text-align:left;border-bottom:1px solid #EBEBEB;height: 70px!important;background-color: rgba(255,255,255,1);">
        <el-col :span="24" style="height: 70px;position: relative;">
          <ul style="height: 100%;">
            <li class="carLi" style="font-weight: bold">卡券列表</li>
          </ul>
          <div style="position: absolute;right: 20px;top: 30px;">
            <!--<el-button type="primary" class="primary" style="width: 85px;height: 35px;" @click="query_">-->
              <!--<span style="font-size: 16px">+</span> <span>新建</span></el-button>-->
            <el-dropdown @command="handleCommand" trigger="click">
          <span class="el-dropdown-link">
          <el-button type="primary" class="primary" style="width: 85px;height: 35px;" @command="query_(val)">
          <span style="font-size: 16px">+</span> <span>新建</span></el-button></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item,index) in options1" :command="JSON.stringify(item)" :key="index">
                  {{item.typeName}}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <!--<div class="grid-content" style="color: #F58534;font-size: 18px;position: absolute;top:0;">推广列表</div>-->
        </el-col>
      </el-row>
      <el-row class="c_menu txt search">
        <el-col :span="12" style="padding-left: 35px;">
          <div class="heig75">
            <span class="span1">优惠券名称：</span>
            <el-input v-model="couponName" placeholder="请输入优惠券名称"
                      style="width: 200px;" class="inputC"></el-input>
          </div>
          <div class="heig75">
            <span class="span1">投放状态：</span>
            <el-select v-model="throwingState" class="y_select inputC" style="width: 200px;">
              <el-option
                v-for="item in Delivery_state"
                :key="item.value"
                :label="item.typeName"
                :value="item.typeId">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="heig75">
            <span class="span1">券类型：</span>
            <el-select v-model="couponType" placeholder="全部" class="y_select inputC"
                       style="width: 200px;">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.typeName"
                :value="item.typeId">
              </el-option>
            </el-select>
          </div>
          <div class="heig75" style="padding-left: 35px;">
            <el-button type="primary" style="width: 80px;" @click="resetData">重置</el-button>
            <el-button type="primary" style="width: 80px;" @click="query_coupon">查询</el-button>
          </div>
        </el-col>
      </el-row>
      <div class="centerBox">
        <div class="" style="text-align:left!important; color:#fff;font-size: 14px;">
          <el-row class="top">
            <el-col :span="2">
              <div class="grid-content textAl_center">券类型</div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content textAl_center">券名称</div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content textAl_center">券面值</div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content textAl_center">使用期限</div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content textAl_center">投放状态</div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content textAl_center">总库存</div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content textAl_center">剩余库存</div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content textAl_center">领取数量</div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content textAl_center">使用数量</div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content textAl_center" style="padding-right: 5px;">操作</div>
            </el-col>
          </el-row>
          <el-row style="border-bottom: 1px solid #EBEBEB;"></el-row>
        </div>
        <div style="margin: 0 10px 0 10px;overflow: auto;width: 99%;padding:14px 0" :style="screenWidth<1367?'height: 70%;':'height:90%;'">
          <el-row class="c_lastList elw" v-for="(item,index) in carList" :key="index"
                  :style="(index%2==0)?'background-color: rgba(236,238,242,1);':''">
            <el-col :span="2">
              <div class="grid-content textAl_center" v-if='item.cardTypeCode==1'>满减券</div>
              <div class="grid-content textAl_center" v-if='item.cardTypeCode==2'>代金券</div>
              <div class="grid-content textAl_center" v-if='item.cardTypeCode==3'>折扣券</div>
              <div class="grid-content textAl_center" v-if='item.cardTypeCode==5'>普通券</div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content textAl_center">{{item.title}}</div>
            </el-col>
            <!--<el-col :span="2">-->
              <!--<div class="grid-content textAl_center">{{item.title}}</div>-->
            <!--</el-col>-->
            <el-col :span="2">
              <div class="grid-content textAl_center" v-if='item.cardTypeCode==2'>{{Number(item.reduceCost)/100}}</div>
              <div class="grid-content textAl_center" v-if='item.cardTypeCode==3'>{{(100-Number(item.discount))/10}}折</div>
              <div class="grid-content textAl_center" v-if='item.cardTypeCode==5'>0</div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content textAl_center" style="word-wrap:break-word">{{(item.dateInfo.split('-')[0])|Time1}}&nbsp;至&nbsp;{{item.dateInfo.split('-')[1]|Time1}}</div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content textAl_center" v-if="item.status<3">待投放</div>
              <div class="grid-content textAl_center" v-if="item.status>=3&item.status!=6">已投放</div>
              <div class="grid-content textAl_center" v-if="item.status==6">已过期</div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content textAl_center">{{item.totalQuantity}}</div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content textAl_center">{{item.quantity}}</div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content textAl_center">{{item.receiveQuantity}}</div>
            </el-col>
            <el-col :span="2" >
              <div class="grid-content textAl_center">{{item.usedQuantity}}</div>
            </el-col>
            <!--<el-col :span="2">-->
              <!--<div class="grid-content textAl_center" v-if="item.couponUserNumber!=0">-->
                <!--{{((item.couponUserNumber/item.couponGrantNumber)*100)|Number}}%-->
              <!--</div>-->
            <!--</el-col>-->

            <el-col :span="3">
              <div class="grid-content textAl_center sonSpan">
                <span class="cuPint colorZC" @click="lookDetail(item)">查看</span>
                <!--<span class="cuPint colorLan" @click="goEditCoupon(item)">编辑</span>-->
                <el-button class="cuPint colorChen" :style="item.status>=3?'color:#C9C9C9;':''" type="text" :disabled="item.status>=3?true:false" style="font-size: 12px;margin-left: 5px;"
                           @click="delivery(item)">
                  投放
                </el-button>
                <!--<span class="cuPint colorChen" @click="delivery(item)" :style="item.status>=3?'color:rgba(123,107,102,1);':''">投放</span>-->
                <span class="cuPint colorLan"  @click="del_data(item)">删除</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-dialog style="text-align: center;position: absolute;" :visible.sync="dialogVisible" size="tiny" :modal="false" :close-on-click-modal="false">
        <span style="font-size: 14px;color: rgba(89,115,128,1)">{{dialogData}}</span>
        <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false" class="cp_qx" v-if="dialog!='txTitle'" >取 消</el-button>
                  <el-button v-if="dialog=='delete'" type="primary" @click="del_coupon(couponTypeId,couponId)" class="cp_qd">确 定</el-button>
                  <el-button v-if="dialog=='delivery'" type="primary" @click="deliveryCar()" class="cp_qd">确 定</el-button>
                  <el-button v-if="dialog=='txTitle'" type="primary" dialogVisible = false class="cp_qd">确 定</el-button>
                </span>
      </el-dialog>

      <div class="block">
        <el-pagination
          style="float: right;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          layout=" prev, pager, next"
          :total="pageTotal*10">
        </el-pagination>
        <div style="float: right;">
          <span style="margin-top: 5px;display: inline-block">共 {{pageTotal}} 页</span>
          <span style="margin-left: 20px;margin-top: 10px;">共计 {{sumNumber}} 条</span>
        </div>
      </div>
    </div>

    <div class="mask" v-if="dialogVisible">

    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    data(){
      return {
        loadingFlag:false,
        input8: '',
        options: [],
        dialogData:'',
        dialog:'',
        dialogL:'',
        couponList: '',
        checked: false,
        pageTotal: '',
        sumNumber: '',
        currentPage: 1,
        dialogVisible: false,
        couponTypeId: '',
        couponId: '',
        options1: [
          {type:2, typeId: "2",typeName:'代金券'},
          {type:3, typeId: "3",typeName:'折扣券'},
          {type:5, typeId: "5",typeName:'普通券'}
        ],
        couponName:"",
        couponType:"",
        throwingState:"",
        screenWidth: document.body.clientWidth,
        Delivery_state: [
          {type: 0, typeId: "0", typeName: "全部"},
          {type: 1, typeId: "1", typeName: "待投放"},
          {type: 2, typeId: "2", typeName: "已投放"},
          {type: 6, typeId: "6", typeName: "已过期"},
//          {type: 3, typeId: "4", typeName: "已过期"},
//          {type: 3, typeId: "5", typeName: "已领完"},
        ],
        value1: '',
        carList:[],
        deliveryData:"",
        page:0,
      }
    },
    mounted () {
      const that = this
      window.onresize = () => {
        return (() => {
          window.screenWidth = document.body.clientWidth
          that.screenWidth = window.screenWidth
        })()
      }
    },
    watch:{
      screenWidth (val) {
        this.screenWidth = val
      },
      couponName(value,oldValue){
        if(oldValue&&value.length == 0){
          this.query_coupon()
        }
      },
    },
    methods: {
      del_data(item){
        this.dialog = 'delete'
        this.dialogData = '确定将卡券删除？'
        this.dialogVisible = true
        this.couponId = item.wxCardId
      },
      goEditCoupon(item){
        this.$store.state.couponType = item.type;
        this.$store.state.couponTypeId = item.typeId;
        this.$store.state.couponData = item
      },
      delivery(item){
        this.dialog = 'delivery'
        this.dialogData = '投放后，所有进入社区商城的用户均可领取该卡券'
        this.dialogVisible = true
        this.deliveryData = item
      },
      deliveryCar(){
        this.$http.put(`${this.$store.state.path}cards/onlinecard?communityId=${this.$store.state.storeId}&cardId=${this.deliveryData.wxCardId}`)
          .then(res => {
            if(!res.body.result){
                return
            }
            if (res.body.resultCode!='0000'){
              this.dialog='txTitle'
              this.dialogData = res.body.msg
            }
            if (res.body.resultCode=='0000'){
              this.dialogVisible = false
              this.query_coupon()
            }
          }, res => {

          })
      },
      resetData(){
//        this.input = this.value = this.value1 = ``
        this.couponName = this.couponType = this.throwingState = ``
        this.query_coupon()
      },
      handleSelect(val){
      },
      handleSizeChange(val) {
      },
      handleCurrentChange(val) {
          this.page = val-1
        this.query_coupon()
      },
      handleCommand(command) {
        command = JSON.parse(command);
        this.$store.state.couponType = command.type;
        this.$store.state.couponTypeId = command.typeId;
        this.$router.push({path: `/browseDetail`})//新建
      },
      lookDetail(item){
        this.$store.state.carDetailId=item.wxCardId
//        this.$store.state.totalQuantity = item.totalQuantity
        localStorage.setItem('totalQuantity',item.totalQuantity)
        this.$router.push({path: `/cardCouponsDetail/${item.wxCardId}`})//详情
      },
      edit_coupon(item){//编辑
        if (item.couponType == 1) {//一代二满三折
          this.$store.state.edit_cashcoupon = item;
          this.$router.push({path: `/cardCoupons/browseDetail/${this.$store.state.storeId}/1`})//编辑代金券
          return
        }
        else if (item.couponType == 2) {
          this.$store.state.edit_fullcut = item;
          this.$router.push({path: `/cardCoupons/browseDetail/${this.$store.state.storeId}/2`})//编辑满减券
          return
        }
        else if (item.couponType == 3) {
          this.$store.state.edit_discount = item;
          this.$router.push({path: `/cardCoupons/browseDetail/${this.$store.state.storeId}/3`})//编辑折扣券
          return
        }
      },
      del_coupon(couponTypeId, couponId){//删除功能
        this.$http.delete(`${this.$store.state.path}cards/card?communityId=${this.$store.state.storeId}&cardId=${this.couponId}`)
          .then(res => {
            this.dialogVisible = false;
            this.query_coupon()
          }, res => {

          })
      },
      query_coupon(res){//查询
          this.couponName = this.couponName.trim();
          let _path = '';
        if (this.couponName) _path += `&cardTitle=${this.couponName}`;
        if (this.couponType) _path += `&cardType=${this.couponType}`;
        if (this.throwingState) _path += `&status=${this.throwingState}`;
        this.loadingFlag = true
        this.carList = []
          this.$http.get(`${this.$store.state.path}cards/records_?storeId=${this.$store.state.storeId}&page=${this.page}&size=10${_path}`)
            .then(res => {
              this.loadingFlag = false
              if (!res.body.result||res.body.resultCode!='0000'){
                this.carList = []
                this.sumNumber = 0
                this.pageTotal = 0
                return
              }
              if (res.body.resultCode=='0000'){
//                console.log('卡券列表',res.body.result.result)
                if(res.body.result){
                  this.carList =res.body.result.result;
                  this.sumNumber = res.body.result.sumNumber;
                  this.pageTotal = res.body.result.totalPage;
                }
              }
            }, res => {
              this.loadingFlag = false
            })
      },
      query_(val){//h获取所有优惠券类别
        console.log(val)
        this.$store.state.couponType = 1
//        this.$router.push({path: `/browseDetail`})//去代金券路由
      }
    },
    created(){
      this.query_coupon()
      this.flag = true
    }
  }
</script>
<style scoped>
  .coupon .iconfont {
    font-size: 14px !important;
  }
  #app .aside{
    z-index: 500;
  }
  #app .coupon .spinner{
    z-index: 502;
  }
  #app .coupon .mask{
    z-index: 501;
  }
  .coupon .cp_qx{
    background-color: rgba(255,135,97,1) !important;
    border-color:rgba(255,135,97,1)!important;
    color: #fff;
  }
  .coupon .cp_qx:hover{
    background-color: #fc6f42 !important;
    border-color: #fc6f42!important;
    color: #fff;
  }

  .coupon {
    background-color: #f8f9f9;
    width: 100%;
    height: 100%;
    padding-left: 200px;
  }

  .coupon .centerBox {
    margin: 20px 20px 0;
    border: 1px solid rgba(4, 4, 4, 0.09);
    border-bottom: 2px solid rgba(4, 4, 4, 0.09);
    border-radius: 5px;
    height: 60%;
  }

  .coupon .centerBox .top {
    overflow: hidden;
    background-color: rgba(87, 189, 222, 1);
    height: 50px;
    line-height: 50px;
    border-radius: 5px;
    padding:0 0 0 10px;
  }

  .coupon .span1 {
    display: inline-block;
    width: 100px;
    text-align: right;
    padding-right: 10px;
    color: rgba(89, 115, 128, 1)
  }

  .coupon .search {
    margin: 20px 20px 0 20px;
    height: 160px;
    color: #656D78;
    border: 1px solid rgba(4, 4, 4, 0.09);
    border-bottom: 2px solid rgba(4, 4, 4, 0.09);
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 1);
  }

  .coupon .el-button--primary {
    color: #fff;
    background-color: rgba(87, 189, 222, 1) !important;
    border-color: rgba(87, 189, 222, 1) !important;
  }

  .colorLan {
    color: rgba(0, 191, 232, 1);
  }

  .colorChen {
    color: rgba(255, 135, 97, 1);
  }
  .colorChen:hover{
    color:rgba(255, 135, 97, 1);
  }
  .colorZC {
    color: rgba(111, 124, 130, 1);
  }

  .colorZH {
    color: rgba(123, 107, 102, 1);
  }

  .coupon .sonSpan span {
    margin-left: 5px;
  }

  .carLi {
    width: 150px;
    height: 100%;
    line-height: 70px;
    text-align: center;
    border-right: 1px solid rgb(235, 235, 235);
    cursor: pointer;
    color: rgba(89, 115, 128, 1);
    font-size: 18px;
    font-family: MicrosoftYaHei;
    /*background-color: rgba(4,4,4,0.09);*/
  }

  .elw {
    overflow: auto;
    color: rgba(89, 115, 128, 1);
    font-size: 12px;
    text-align: left !important;
    /*height:40px;*/
    line-height:40px;
    border-radius: 5px;
  }

  .coupon {
    /*margin: 30px 60px 0 60px;*/
  }

  .heig75 {
    height: 75px;
    line-height: 75px;
  }

  .coupon .el-pager li.active {
    /*border-color: #F58534 !important;*/
    background-color: #F58534 !important;
  }

  .coupon > .menu {
    /*margin-right: -20px!important;*/
  }

  .coupon .txt-size {
    font-size: 14px;
  }

  .a_top {
    width: 100% !important;
    height: 40px !important;
    margin-left: 0 !important;
    position: relative;
  }

  .a_top .grid-text {
    font-size: 18px;
    color: #545558;
  }

  .primary > span {
    font-size: 14px !important;
  }

  .coupon .el-pager li.active {
    border-color: #1dabd9 !important;
    background-color: #1dabd9 !important;
  }

  .icon-xiugai {
    font-size: 12px !important;
    color: #EF6B0C !important;
  }

  .el-button--primary:focus, .el-button--primary:hover {
    background-color: #1dabd9 !important;
    border-color: #1dabd9 !important;
  }

  .coupon .el-button--info, .coupon .el-button--primary {
    color: #fff;
    background-color: rgba(87, 189, 222, 1);
    border-color: rgba(87, 189, 222, 1);
  }

  .el-button--info:focus, .el-button--info:hover {
    background-color: #1dabd9 !important;
    border-color: #1dabd9 !important;
  }


</style>
